<template>
    <div class="UserMsgBox">
        <span class="pageName">用户管理 > 用户私信</span>

        <div class="searchBox">
            <!-- 输入框 -->
            <!-- 号码 -->
            <div class="searchInp">
                <!-- 名称-->
                <el-select v-model="searchName" slot="prepend" placeholder="手机号" class="searchName" :input="inputSearchName(this.searchName)">
                    <el-option v-for="(item,index) in optionArr" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
                <!-- 内容 -->
                <el-input v-model="searchNum" placeholder="请输入内容" class="inp" :input="inputSearchNum(this.searchNum)"></el-input>
            </div>
            <!-- 昵称 -->
            <div class="searchInp">
                <label for="theName" class="noGapLabel">
                    昵称：
                </label>
                <el-input v-model="toName" placeholder="请输入昵称" name="theName" class="inp"></el-input>
            </div>
            <el-button type="primary" @click="searchUser">搜索</el-button>
            
        </div>
        
        <div class="tableBox">
            <!-- 表格 -->
            <el-table
                :data="userMsg.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                border
                style="width: 98%;font-size: 14px;margin: auto;margin-left: 30px;"
                :header-cell-style="{background:'#015478',color:'#fff'}"
                >
                <el-table-column
                    prop="id"                
                    label="ID"
                    align="center"
                    width="68px">
                </el-table-column>
                <el-table-column
                    prop="img"
                    label="头像"
                    align="center"
                    width="52px">
                    <template slot-scope="scope">
                        <img slot="reference" :src="scope.row.img" style="width: 30px;height: 30px">
                    </template>
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="昵称"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="tel"
                    label="手机号"
                    align="center"
                    width="107px">
                </el-table-column>
                <el-table-column
                    prop="chatNum"
                    label="来聊号"
                    align="center"
                    width="66px">
                </el-table-column>
                <el-table-column
                    prop="sex"
                    label="性别"
                    align="center"
                    width="50px">
                </el-table-column>
                <el-table-column
                    prop="palNum"
                    label="好友数量"
                    align="center"
                    width="80px">
                </el-table-column>
                <el-table-column
                    prop="groupNum"
                    label="群组数量"
                    align="center"
                    width="80px">
                </el-table-column>
                <el-table-column
                    prop="vip"
                    label="会员"
                    align="center"
                    width="52px">
                </el-table-column>
                <el-table-column
                    prop="loginDate"
                    label="最近登录"
                    align="center"
                    width="124px">
                </el-table-column>
                <el-table-column
                    prop="registerDate"
                    label="注册时间"
                    align="center"
                    width="124px">
                </el-table-column>
                <el-table-column
                    prop="mode"
                    label="状态"
                    align="center"
                    width="68px">
                </el-table-column>
                <el-table-column
                    prop="online"
                    label="在线"
                    align="center"
                    width="80px">
                </el-table-column>
                <el-table-column
                    label="操作"
                    align="center"
                    width="175px">
                <template slot-scope="scope">
                    <el-button @click="del(scope.row)" type="text" style="color: #015478;font-size: 14px">删除</el-button>
                </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <pagination :tableData="userMsg" @sizeChange="sizeChange" @currentChange="currentChange"></pagination>
        </div>
    </div>
</template>

<script>
    import pagination from '@/components/pagination/pagination.vue';

    export default {
        name:'UserMsg',
        components:{
            pagination
        },
        data(){
            return {
                userMsg:[],
                currentPage: 1, // 当前页码
                total: '', // 总条数
                pageSize: 8, // 每页的数据条数

                // 输入框内容
                searchName:'',
                searchNum:'',
                toName:'',
                optionArr:[
                    {label:'ID',value:'id'},
                    {label:'手机号',value:'tel'},
                    {label:'来聊号',value:'chatNum'}
                ],

                // 选中
                multipleSelection: []
            }
        },
        methods:{
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            sizeChange(current,count){
                this.currentPage = current;
                this.pageSize = count;
            },
            currentChange(current){
                this.currentPage = current
            },
            // 删除当前选中内容
            del(row){
                console.log(row);
            },
            // 搜索
            searchUser(){
                console.log('搜索');
            },

            inputSearchName(e){
            },
            inputSearchNum(e){
            },
        },
        created(){
            this.searchName = this.optionArr[1].value
            this.$axios.get(this.$api.user.userList)
                .then(res=>{
                    this.userMsg = res.data;
                })
                .catch(err=> {
                    console.log(err);
                })
        },
    }
</script>

<style scoped>
     .UserMsgBox{
        display: flex;
        flex-direction: column;
     }
     .inpBox{
        display: flex;
        padding: 10px 10px;
    }
    .searchInp{
        display: flex;
        align-items: center; 
        margin-left: 20px;
    }
    .inp{
        width: 130px;
    }
    
    button {
        height: 40px;
        margin-left: 10px;
    }

    .searchInp{
        display: flex;
        align-items: center; 
        margin-left: 20px;
    }
    .inp{
        width: 150px;
    }
    .searchName{
        width: 90px;
    }
</style>